{include  file="common/doc" /}
<body>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="toolbar layui-form">
            <?php echo $operation['toolbar'] ?>
        </div>
        <div class="layui-card-body">
            <table class="layui-table" id="table_list" lay-filter="table_list"></table>
        </div>
    </div>
    <script type="text/html" id="op_table">
        </div>
        <!-- 表格操作行-->
        <?php echo $operation['tool'] ?>
    </script>
    <template id="form_template" style="display: none">
        <form class="layui-form" id='form' lay-filter="form" style="margin-top:10px;">
            <div class="layui-form-item">
                <label class="layui-form-label">上一级</label>
                <div class="layui-input-inline">
                    <input type="text" id="tree" lay-filter="tree" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">菜单名称</label>
                <div class="layui-input-inline">
                    <input class="layui-input" type="text" name="column_name" placeholder="请输入"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">序号</label>
                <div class="layui-input-inline">
                    <input type="hidden" name="column_parent">
                    <input type="number" value="255" name="sort" class="layui-input">
                </div>
            </div>
            <div class="attach"></div>
            <div class="layui-form-item">
                <label class="layui-form-label">关键字</label>
                <div class="layui-input-inline">
                    <input type="hidden" name="column_parent">
                    <input type="text"  name="keywords" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">描述</label>
                <div class="layui-input-block">
                    <textarea name="description" placeholder="请输入描述内容" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" type="submit" lay-submit lay-filter="form_submit">提交</button>
                    <button class="layui-btn layui-btn-primary" type="reset">重置</button>
                </div>
            </div>
        </form>
    </template>
</div>
<script src="/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
        treeTable: 'treeTable/treeTable', //主入口模块
    }).use(['index', 'util', 'treeTable', 'treeSelect', 'laytpl'], function (){
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;
        var treeTable = layui.treeTable;
        var treeSelect = layui.treeSelect;
        function open(data ={}){
            function treeChooser(input,cat=0,chooser_node = 0,unset='') {
                treeSelect.render({
                    // 选择器
                    elem: '#tree',
                    // 数据
                    data: 'read?data_type=tree',
                    // 异步加载方式：get/post，默认get
                    type: 'get',
                    // 占位符
                    placeholder: '占位符',
                    // 是否开启搜索功能：true/false，默认false
                    search: true,
                    // 点击回调
                    click: function (d) {
                        $("input[name=" + input + "]").val(d.current.id);
                    },
                    success: function (d) {
                        treeSelect.checkNode('tree', chooser_node);
                    }

                });
            }


            layer.open({
                type: 1,
                title: '菜单编辑',
                area: ['500px', '500px'],
                content: $('#form_template').html(),
                success: function (lay, index) {

                    form.on('select(chooser_module)',function(op){

                        let val = op.value;
                        $.ajax({
                            url:'/admin/module/read',
                            data:{'where':{'module_id':val}},
                            async:false,
                            success:function(res){
                                let  data  =res['data'];
                                let  tem =  data[0]['tem'];
                                let html ='';
                                tem.forEach(function(item){
                                    html+=`<option value="${item['template_id']}">`;
                                    html+=item['template_name'];
                                    html+='</option>';
                                });

                                $('.template').html(` <label class="layui-form-label" style="width:auto">模板</label> <div class="layui-input-inline"> <select name="template_id" id=""> ${html} </select> </div>`);
                                form.render('select');

                            }
                        });
                    });
                    form.render();
                    let url = 'add';
                    if (JSON.stringify(data)!=='{}'){
                        treeChooser('column_parent',data['column_parent'], data['column_parent']);
                        let template = $('select[name=module_id]').next('.layui-form-select').find('dd[lay-value='+data['module_id']+']');
                        template.click();
                        form.val('form',data);
                        url = 'upd';
                    }else{
                        treeChooser('column_parent',0);
                    }
                    form.on('submit(form_submit)', function (ewa) {
                        Object.assign(data, ewa.field);
                        let status = request({'url': url, 'data': data});
                        if (status) {
                            layer.close(index);
                            table.reload('table_list');
                        }
                        return false;
                    });
                }
            })
        }
        function table(){
            $.ajax({
                url:'read',
                method:'get',
                success:function(response){
                    var table = treeTable.render({
                        elem: '#table_list',
                        tree: {
                            iconIndex: 2,
                            pidName:'column_parent',
                            idName:'column_id',
                            isPidData:true,
                        },
                        data:response['data'],
                        cols: [
                            {type: 'numbers'},
                            {type: 'checkbox'},
                            {field: 'column_name', title: '栏目名称',width:200},
                            {field: 'icon', align:'center', title: '图标',templet:function(d){
                                    return  d.icon ? '<i class="layui-icon '+d.icon+'">' : '';
                                }},
                            {field: 'module_name', align:'center', title: '模块',style: 'color:red'},
                            {field: 'keywords', align:'center', title: '关键字'},
                            {field: 'description', align:'center', title: '描述'},
                            {field: 'addtime', align:'center', title: '添加时间'},
                            {align: 'center', toolbar: '#op_table', title: '操作',width:300}

                        ],
                        style: 'margin-top:0;'
                    });


                }

            });
        }
        table();
        treeTable.on('tool(table_list)',function(obj){
            if (obj.event == 'upd'){
                open(obj.data);
            }
            if (obj.event=='del'){
                let status = request({'url': 'del', 'data': {'column_id':obj.data['column_id']}});
                if (status) {
                    obj.del();
                }
            }
        });

        $('.toolbar').on('click','a[lay-event]',function(){
            open();
            console.log(this);
        });

    });
</script>
</body>
</html>

